<template>
  <div class="enterHourse">
    <Row :gutter="16">
      <Button type="primary" icon="plus-round" @click="addHourse">新增入库</Button>
      <i-form :model="formItem" :label-width="80" class="from">
          <!-- <Form-item label="选择时间：" class="item">
            <Date-picker type="daterange" placement="bottom-start" placeholder="选择日期" v-model="formItem.timeFrame" @on-change="changetime"></Date-picker>
          </Form-item> -->
          <Form-item label="入库类型：" class="item">
            <Select v-model="formItem.type" style="width:80px;margin-right:5px">
                <Option v-for="item in types" :key="item" :value="item">{{item}}</Option>
            </Select>
            <Input v-model="formItem.query" placeholder="入库单号" style="width: 120px"></Input>
          </Form-item>
          <Button type="primary" shape="circle" icon="ios-search" class="item" @click="search"></Button>
      </i-form>
    </Row>
    <Row :gutter="16">
      <i-table ref="table" border :content="self" :columns="columns" :data="data"></i-table>
    </Row>
    <Row :gutter="16" class="page">
			<Page show-total :current.sync="current" :total="dataCount" :page-size="10" @on-change="changepage" show-elevator></Page>
		</Row>
    <Modal title="新增入库" :width="1200" v-model="modalShow" @on-ok="submit" :loading="true">
      <add-hourse ref='addHourse' @changeLoading="changeLoading"></add-hourse>
    </Modal>
    <Modal title="审核入库" :width="1200" v-model="checkShow" @on-ok="checkSubmit" :loading="true" ok-text="审核">
      <check-hourse :data="checkData"></check-hourse>
    </Modal>
    <Modal title="审核入库" :width="1200" v-model="lookShow">
      <check-hourse :data="lookData"></check-hourse>
    </Modal>
  </div>
</template>

<script>
import hourse from '@/api/hourse.js'
import addHourse from './enterhourse/addModel'
import checkHourse from './enterhourse/checkModel'
export default {
  name: "enterHourse",
  components:{
    addHourse,
    checkHourse
  },
  data() {
    return {
      self: this,
      formItem: {
        // timeFrame: "",
        type:'',
        query:''
      },
      types:[],
      dataCount:0,
      current:1,
      modalShow:false,
      checkShow:false,
      checkData:{},
      lookData:{},
      lookShow:false,
      columns: [
        {
          title: "入库单号",
          key: "id"
        },
        {
          title: "入库时间",
          width:150,
          key: "createTime"
        },
        {
          title: "入库方式",
          key: "type"
        },
        {
          title: "供应商",
          key: "provider"
        },
        {
          title: "制单人",
          key: "username"
        },
        {
          title: "状态",
          key: "status",
          width:100,
          align: 'center',
          render: (h, { row }) => {
            return row.status == 0
              ? h("Tag", {props:{color:'#d9534f'}},'待审核')
              : h("Tag", {props:{color:'#aeafb1'}},'已审核')
          }
        },
        {
          title: "操作",
          key: "action",
          width:150,
          align: 'center',
          render: (h, { row }) => {
            return row.status == 0
              ? h("p", [
                  h("Button",{props:{size:'small',type:'success'},on:{click:()=>{this.checkDrug(row.id)}},style:{marginRight:'5px'}}, [
                    h("Icon", {props: {type: "checkmark-circled"},style: {marginRight: "3px"}}),
                    h("span", "审核")
                  ]),
                  h("Button",{props:{size:'small',type:'error'},on:{click:()=>{
                    this.$Modal.warning({
                        title: "确定删除？",
                        content: "删除后不能找回",
                        onOk:()=>{
                          hourse.inputDelete({inputId:row.id})
                          .then(()=>{
                            this.$Message.success('删除成功！')
                            this.changepage()
                          })
                        }
                    });
                  }}}, [
                    h("Icon", {props: {type: "ios-trash"},style: {marginRight: "3px"}}),
                    h("span", "删除")
                  ])
                ])
              : h("Button",{props:{size:'small',type:'primary'},on:{click:()=>{this.lookDrug(row.id)}}}, [
                  h("Icon", {props: {type: "eye"},style: {marginRight: "3px"}}),
                  h("span", "查看详情")
                ])
          }
        }
      ],
      data: [
      ],
    };
  },
  methods: {
    search() {
      hourse.inputList({
      pageIndex:1,
      pageSize:10,
      ...this.formItem
    }).then(({data})=>{
      this.dataCount=data.total;
      this.data=data.records
      let type = data.records.map(index=>index.type)
      let typeSet = new Set(type)
      type = [...typeSet]
      this.types = type
    })
    },
    changepage(page) {
      hourse.inputList({
      pageIndex:this.current,
      pageSize:10,
      ...this.formItem
      }).then(({data})=>{
        this.dataCount=data.total;
        this.data=data.records
        let type = data.records.map(index=>index.type)
        let typeSet = new Set(type)
        type = [...typeSet]
        this.types = type
      })
    },
    addHourse(){
      this.modalShow=true
    },
    submit(){
      this.$refs.addHourse.submit()
    },
    changeLoading(show){
      this.modalShow=show
      this.changepage()
    },
    checkDrug(id){
      this.checkShow=true
      hourse.inputDetail({inputId:id})
      .then((data)=>{
        this.checkData=data.data
      })
    },
    checkSubmit(){
      hourse.inputCheck({inputId:this.checkData.id})
      .then(data=>{
        this.checkShow=false;
        this.$Message.success('审核成功！')
        this.changepage()
      })
    },
    lookDrug(id){
      this.lookShow=true
      hourse.inputDetail({inputId:id})
      .then((data)=>{
        this.lookData=data.data
      })
    }
  },
  mounted() {
    hourse.inputList({
      pageIndex:this.current,
      pageSize:10
    }).then(({data})=>{
      this.dataCount=data.total;
      this.data=data.records
      let type = data.records.map(index=>index.type)
      let typeSet = new Set(type)
      type = [...typeSet]
      this.types = type
    })
  },
};
</script>

<style lang="less" scoped>
.enterHourse {
  .tableIcon {
    margin-right: 2px;
  }
  .from{
    float: right;
    display: flex;
    justify-content: flex-end;
    .item{
      margin-right: 15px;

    }
  }
  .page{
    padding-top: 20px;
    padding-right: 20px;
    text-align: right;
  }
}
</style>
